<template>
	<view class="content">
		<view class="order-info">
			<text class="txt1">产品信息</text>
			<view class="txt2">
				<text class="txt2-1">产品名称</text>
				<text class="txt2-2">{{productInfo.productName}}</text>
			</view>
			<view class="txt2">
				<text class="txt2-1">销售价</text>
				<text class="txt2-2">{{productInfo.price+"\t元"}}</text>
			</view>
			<view class="txt2">
				<text class="txt2-1">成本价</text>
				<text class="txt2-2">{{productInfo.costPrice+"\t元"}}</text>
			</view>
			<view class="txt2">
				<text class="txt2-1">供应商</text>
				<text class="txt2-2">{{productInfo.supplierName}}</text>
			</view>
			<view class="txt2">
				<text class="txt2-1">折算量</text>
				<text class="txt2-2">{{productInfo.smallNum+"\t车"}}</text>
			</view>
			<view class="txt2" style="display: flex;align-items: center;justify-content: space-between;">
				<view style="display: flex;align-items: center;">
					<view class="txt2-1">库存</view>
					<view class="txt2-2">{{productInfo.bigNum+"\t卷"}}</view>
				</view>
				<image class="add" src="https://peixin.peiyu.online/xmk/images/添加.png" mode="heightFix" @click="addNum">
				</image>
			</view>
			<view class="txt2">
				<text class="txt2-1">在架上</text>
				<text class="txt2-2">{{productInfo.isActive?"是":"已下架"}}</text>
			</view>

		</view>

		<!-- <view class="btn" @click="onclick">
			编辑产品
		</view> -->
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		api_product_infoById,
		api_supplier_list
	} from "../../../../apis/apis.js"
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from "@dcloudio/uni-app"


	const productInfo = ref({}); //产品信息
	const productId = ref(0);

	/*
	编辑页面（弃用）
	const onclick = () => {
			uni.navigateTo({
				url: `/pages/storeman/store/storeInfo/storeEdit/storeEdit?id=${productInfo.value.id}`
			});
		}
	*/

	//点击添加库存
	const addNum = () => {
		uni.navigateTo({
			url: `/pages/storeman/store/storeInfo/addNum/addNum?id=${productInfo.value.id}`
		})
	}



	onLoad( (e) => {
		console.log(e);
		productId.value = e.id
		//查产品信息
		// try {
		// 	let res = await api_product_infoById({
		// 		id: e.id
		// 	});
		// 	productInfo.value = res.data;
		// 	productId.value = res.data.id;
		// } catch (e) {
		// 	uni.showToast({
		// 		title: e.msg,
		// 		icon: "none"
		// 	});
		// }
	});


	onShow(() => {
		uni.startPullDownRefresh();
	})


	onPullDownRefresh(() => {
		setTimeout(async () => {
			try {
				let res = await api_product_infoById({
					id: productId.value
				});
				productInfo.value = res.data;
			} catch (e) {
				uni.showToast({
					title: e.msg,
					icon: "none"
				});
			}
			uni.stopPullDownRefresh();
		}, 50)

	});
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		background-color: #ededf4;
		width: 750rpx;
		// padding-top: 36rpx;
		padding-bottom: calc(calc(env(safe-area-inset-bottom)) + 10rpx);
		height: 100vh;

		.order-info {
			background-color: $main-background-color;
			width: 700rpx;
			display: flex;
			flex-direction: column;
			align-items: left;
			gap: 20rpx;
			margin-top: 20rpx;

			.txt1 {
				font-family: Alibaba_PuHuiTi_Medium;
				font-weight: 500;
				font-size: 34rpx;
				color: $font-primary-color;
			}

			.txt2 {
				display: flex;
				align-items: center;
				width: 100%;

				.txt2-1 {
					width: 160rpx;
					font-family: Alibaba_PuHuiTi_Light;
					font-weight: 300;
					font-size: 34rpx;
					color: $font-primary-color;
					margin-right: 30rpx;
				}

				.txt2-2 {
					font-family: Alibaba_PuHuiTi_Light;
					font-weight: 300;
					font-size: 36rpx;
					color: $font-sub-color;
				}

				.add {
					height: 46rpx;
					padding: 0 8rpx;
				}
			}
		}

		.btn {
			width: 700rpx;
			height: 75rpx;
			background: $primary-color;
			border-radius: 100rpx;
			border: none;
			color: white;
			font-weight: 300;
			font-size: 36rpx;
			font-family: Alibaba_PuHuiTi_Light;
			display: flex;
			justify-content: center;
			align-items: center;
			letter-spacing: 5rpx;
		}
	}
</style>